<template>
  <div id="signsBreatheSubChart">
    <vue-datepicker-local v-model="emptyTime" clearable @clear="clear" :placeholder="'请选择时间范围'" />
    <lineEcharts v-if="listData.length"  class="line" :name="'呼吸趋势图'"  :items="listData"></lineEcharts>
    <loading v-if="isShow && listData.length== 0"></loading>
    <noSearch v-if="!isShow && listData.length == 0"></noSearch>
  </div>
</template>
<script>
  import lineEcharts from '@/components/echarts/lineEcharts'
  import loading from '@/components/loading/loading'
  import { standardDate } from "@/components/common/date"; //引入时间转换JS
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import { apiSignsIO } from '@/api/api'  //引入呼吸列表数据
export default {
    data() {
      return {
        time: [],
        listData: [],
        dataTime: "0000-00-00",
        emptyTime: [],
        startDate: "",
        endDate: "",
        isShow: true
      }
    },
    watch: {
      emptyTime: {
        handler(curVal, oldVal) {
          if (standardDate(curVal[0]) == 'NaN-NaN-NaN' || standardDate(curVal[1]) == 'NaN-NaN-NaN') {
            this.startDate = '';
            this.endDate = '';
            this.isShow = true;
            this.getSignsBreathe();
          } else {
            this.isShow = true;
            this.startDate = standardDate(curVal[0]);
            this.endDate = standardDate(curVal[1]);
            this.getSignsBreathe();
          }
        }
      }
    },
    created() {
      this.clear();
    },
    mounted() {
      this.getSignsBreathe();
    },
    methods: {
      getSignsBreathe() {
        apiSignsIO({
          patientID: this.$store.getters.ID,
          dateTime: this.dataTime,
          type: "呼吸",
          startDate: this.startDate,
          endDate: this.endDate

        })
          .then(res => {
            this.listData = [];
            if (JSON.parse(res).Status == 1) {
              this.isShow = true;
              //console.log(JSON.parse(res).Data)
              let data = JSON.parse(res).Data
              let timeArr = [];

              for (var item in JSON.parse(res).Data) {
                for (var items of data[item]) {
                  if ($.inArray(items.PER_Time, timeArr) == -1) { //去重
                    timeArr.push(items.PER_Time);
                    this.listData.push({ date: this.filterDate(items.PER_Time), value: items.Values });
                  }
                }
              }
              this.listData.reverse();  //数组倒叙
              //console.log(timeArr)
            } else if (JSON.parse(res).Status == -1) {
              this.isShow = false;
            }
          })
      },
      filterDate(time) {
        if (!time) {
          return '';
        }
        else {
          time = time.replace(/\//g, '-');
          time = time.replace(/T/g, ' ');
          return time.substring(5, 16);
        }
      },
      clear() {
        this.emptyTime = []
      }
    },
    components: {
      lineEcharts,
      loading,
      VueDatepickerLocal,
      noSearch
    }
} 
</script>
<style scoped>
  #signsBreatheSubChart {
    height: calc(100vh - 195px);
    overflow-y: auto;
    min-width: 700px;
  }
  .line {
    width: 80%;
    height: 100%;
    margin: 0 auto;
  }
  #signsBreatheSubChart .datepicker {
    position: absolute;
    top: 21px;
    left:240px;
  }
</style>
